<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏动画</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery-migrate-1.0.0.js"></script>
<script>
    //分析：
    // 1.使用定时器来控制动画的显示和隐藏
    //2.分析发现jquery的显示和隐藏动画效果其实就是对那个动画的显示（那个div）的控制
    //3.使用show、hide方法来完成广告的显示
    //入口函数，在加载页面完成之后定义定时器来分别调用这两个方法
    $(function () {
        //定义定时器，调用adShow方法，3秒后执行
        setTimeout(adShow,3000);
        //定义定时器，调用adHide方法，8秒后执行（3+5=8）
        setTimeout(adHide,8000);

    });
    function adShow() {
        //获取广告div，调用显示方法
        $("#ad").show("slow");
    }
    function adHide() {
        //获取广告div，调用隐藏方法
        $("#ad").hide("slow");
    }
</script>
</head>
<body>
<div>
    <div id="ad" style="display:none;"></div>
    <img src="008.jpg" style="width: 40%"/>
</div>
</body>
</html>